import Table from '../table/table';
import page from './page.art';
import bottonRe from '../toolbar/button.art';
import createRe from '../create/create.art';
import updateRe from './update.art';

class TablePage extends Table {
    constructor(tableConfig) {
        super(tableConfig);
        this.formatData = tableConfig.formatData;
        this.currAllClicked = [];

        const _this = this;
        console.log(_this);
        console.log('**', tableConfig);
        const toolbar = {
            create: {
                show: true,
                name: 'create',
                title: '新增',
                icon: '<i class="layui-icon">&#xe654;</i>',
                color: '',
                list: ['name', 'description'],
                click: function(ele, allEle, col, next) {
                    const mergeData = {};
                    let data = {};
                    for (let listI in this.list) {
                        for (let list in tableConfig.columns) {
                            if (tableConfig.columns[list].field === this.list[listI]) {
                                mergeData[(tableConfig.columns[list].field)] = tableConfig.columns[list];
                            }
                        }
                    }
                    data.mergeData = mergeData;

                    console.log(data);
                    const crateHtml = createRe(data);
                    const createLayer = _this.layer.confirm(crateHtml, {
                        title: this.title,
                        type: 1,
                        btn: ['保存', '取消'] //按钮
                    }, function(ele) {
                        const addData = _this.$('.create-window').serializeArray();
                        console.log(addData);
                        let reAddData = {};
                        for (let list in addData) {
                            reAddData[addData[list].name] = addData[list].value
                        }
                        reAddData.type = 'add';
                        console.log(reAddData)
                        _this.getData({

                                data: reAddData

                        }, function(data) {
                            console.log(data)
                            _this.layer.close(createLayer)
                            _this.layer.msg('添加数据成功', {
                                time: 5000, //20s后自动关闭
                            });
                            next();
                        });
                    });

                    next();
                }
            },

            update: {
                show: true,
                name: 'update',
                title: '修改',
                icon: '<i class="layui-icon">&#xe642;</i>',

                color: '',
                list: ['name', 'description'],
                click: function(ele, allEle,col, next) {

                    if (_this.allSelectNum() > 1) {
                        _this.layer.msg('修改只能选择一个, 请重置后选择', {
                            time: 5000, //20s后自动关闭
                        });
                    } else if (_this.allSelectNum() < 1){
                        _this.layer.msg('请选择修改项', {
                            time: 5000, //20s后自动关闭
                        });
                    } else {
                        const mergeData = {};
                        let data = {};
                        let currClick = {};

                        for (let list in _this.currAllClicked) {
                            if (!_this.$.isEmptyObject(_this.currAllClicked[list])) {
                                currClick = Object.values(_this.currAllClicked[list])[0]
                            }
                        }

                        for (let listI in this.list) {
                            for (let list in tableConfig.columns) {
                                if (tableConfig.columns[list].field === this.list[listI]) {
                                    mergeData[(tableConfig.columns[list].field)] = tableConfig.columns[list];
                                    mergeData[(tableConfig.columns[list].field)].value = currClick[this.list[listI]]
                                }
                            }
                        }
                        data.mergeData = mergeData;

                        // mergeData.currClickedA = Object.values(_this.currClicked)[0];
                        // mergeData.list = this.list;

                        const updateHtml = updateRe(data);
                        const updateLayer = _this.layer.confirm(updateHtml, {
                            title: this.title,
                            type: 1,
                            btn: ['保存', '取消'] //按钮
                        }, function(ele) {
                            const addData = _this.$('.create-window').serializeArray();
                            let reAddData = {};
                            for (let list in addData) {
                                reAddData[addData[list].name] = addData[list].value
                            }
                            reAddData.type = 'update';
                            reAddData.id = currClick[tableConfig.primary];
                            console.log(reAddData);

                            _this.getData({
                                data: reAddData
                            }, function(data) {
                                console.log(data);
                                _this.layer.close(updateLayer);
                                _this.layer.msg('修改成功', {
                                    time: 5000, //20s后自动关闭
                                });
                                next();
                            });
                        });
                    }

                    next();
                }
            },
            delete: {
                show: true,
                name: 'delete',
                title: '删除',
                icon: '<i class="layui-icon">&#xe640;</i>',
                color: '',
                click: function(ele, allEle,col, next) {
                    if (_this.allSelectNum() < 1){
                        _this.layer.msg('请选择删除项', {
                            time: 5000, //20s后自动关闭
                        });
                    } else {
                        let currClickid = [];

                        for (let list in _this.currAllClicked) {
                            if (!_this.$.isEmptyObject(_this.currAllClicked[list])) {
                                for (let lists in Object.values(_this.currAllClicked[list])) {
                                    currClickid.push(Object.values(_this.currAllClicked[list])[lists][tableConfig.primary])
                                }
                            }
                        }

                        console.log(currClickid)


                        // mergeData.currClickedA = Object.values(_this.currClicked)[0];
                        // mergeData.list = this.list;
                        layer.msg('删除所选的'+_this.allSelectNum()+'个选项？', {
                            time: 0 //不自动关闭
                            ,btn: ['删除', '取消']
                            ,yes: function(index){
                                let reAddData = {};
                                reAddData.type = 'delete';
                                reAddData.id = currClickid;
                                _this.getData({
                                    data: reAddData
                                }, function(data) {
                                    _this.layer.close(updateLayer);
                                    _this.layer.msg('修改成功', {
                                        time: 5000, //20s后自动关闭
                                    });
                                    next();
                                });
                            }
                        });
                    }

                    next();
                }
            }
        };

        tableConfig.toolbar = _this.$.extend(true, toolbar, tableConfig.toolbar);

    }

    setPage(num) {

    }

    allSelectNum() {
        // Object.keys(this.currClicked).length;
        let num = 0;
        for (let list in this.currAllClicked) {
            num = num + Object.keys(this.currAllClicked[list]).length;
        }
        console.log(num);
        return num;
    }

    createButton(data) {
        const _this = this;
        // {
        //     name: 'custom',
        //     title: '自定义',
        //     icon: '',
        //     color: '',
        //     click: function(data) {
        //     console.log(data)
        // }
        const bottonHtml = bottonRe(data);
        this.$(this.selector).find('.etable-toolbar').append(bottonHtml);
        const next = function () {
            _this.loading.close();
            _this.resetCurPage(_this.serverData.data.pageNum);
        };
        this.$(this.selector).find('.etable-toolbar'+' .etable-'+data.name).click(function (ele) {
            _this.loading.open();
            data.click(ele, _this.currAllClicked,_this.columns, next)
        })
    }

    allClicked(data, currPage) {
        this.clicked(data);
        console.log(this.currAllClicked[currPage-1]);
        if (this.currAllClicked[currPage-1] === undefined) {
            this.currClicked = {};
            this.currAllClicked[currPage-1] = this.getCurrClicked();
        } else {
            this.setCurrClicked(this.currAllClicked[currPage-1])
        }
        console.log(this)
    }

    clearAllClicked (data) {
        this.currAllClicked = [];
        this.clearClicked(data);
        this.allClicked(data, data.data.pageNum)
    }

    getTableData(pageNum, next) {
        const _this = this;
        _this.getData({
            data:{
                type: 'get',
                pageNum: pageNum,
                pageSize: _this.tableConfig.pageSize
            }
        }, function(data) {
            // console.log(data);
            data = _this.formatData(data);
            if (next !== undefined) {
                next(data);
            }

            // _this.columnsFormat(data);
            _this.serverData = data;

            _this.render(_this);

            _this.laypage({
                cont: _this.$(_this.selector).find('.etable-page'),
                pages: data.data.pages, //总页数
                groups: 5, //连续显示分页数
                skip: false,
                curr: data.data.pageNum,
                jump: function(obj, first) {
                    //得到了当前页，用于向服务端请求对应数据
                    if (first !== true) {
                        _this.getTableData(obj.curr)
                    } else {
                        _this.allClicked(data, obj.curr);
                    }
                }
            });

        })
    }

    createToolbar () {
        console.log(this);
        if (this.tableConfig.toolbar.create.show) {
            this.createButton(this.tableConfig.toolbar.create);
        }
        if (this.tableConfig.toolbar.update.show) {
            this.createButton(this.tableConfig.toolbar.update);
        }
        if (this.tableConfig.toolbar.delete.show) {
            this.createButton(this.tableConfig.toolbar.delete);
        }
    }

    resetCurPage(pageNum) {
        this.getTableData(pageNum)
    }

    init() {
        const _this = this;
        this.initLayout();
        if (this.tableConfig.width) {
            _this.setWidth(this.tableConfig.width);
        }

        this.getTableData(1, function(data) {
            if (_this.tableConfig.pagination) {
                const pageHtml = page(data.data);
                _this.$(_this.selector).append(pageHtml);
                _this.$(_this.selector).find('.etable-reset').click(function () {
                    layer.msg('清除所有选择？', {
                        time: 0 //不自动关闭
                        ,btn: ['清除', '取消']
                        ,yes: function(index){
                            layer.close(index);
                            _this.clearAllClicked(_this.serverData);
                            layer.msg('已清除 O.o', {
                                icon: 6,
                                time: 1000
                            });
                        }
                    });
                });
            }

            _this.createToolbar();

        });

    }
}

export default TablePage;